<template>
  <j-modal
    :title="title"
    :width="600"
    :visible="visible"
    :maskClosable="false"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    @close="close"
    cancelText="关闭"
  >
    <div style="margin: 0 auto" :class="{ isCheck: isCheck }">
      <a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" :model="model">
        <a-form-model-item label="类型">
          <a-select v-model="model.type" @change="selectChange" :disabled="disableSubmit">
            <a-select-option value="底稿">
              底稿
            </a-select-option>
            <a-select-option value="问题">
              问题
            </a-select-option>
            <a-select-option value="取证">
              取证
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item :label="model.type || '问题'">
          <a-select v-model="model.number" :placeholder="model.type" :disabled="disableSubmit">
            <a-select-option v-for='(item,index) in numberList' :key='item.id' :value="item.id">
              {{item.number}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="授权成员">
          <a-select
            :disabled="disableSubmit"
            v-model="model.uid"
            mode="multiple"
            style="width: 100%"
            option-label-prop="label"
          >
            <template v-for="(item,index) in userListData">
              <a-select-option :value="item.id" :label="item.name" :key="item.id">
                {{item.name}}
              </a-select-option>
            </template>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </div>
    <!-- table区域-end -->.
  </j-modal>
</template>
<script>
  import {httpAction, getAction} from '@/api/manage'

  export default {
    name: 'SysPositionModal',
    props: ['id'],
    components: {},
    data() {
      return {
        labelCol: {span: 4},
        wrapperCol: {span: 18},
        disableSubmit: false,
        title: '机构信息',
        visible: false,
        isCheck: false,
        model: {},
        numberList: [],
        userListData: [],
        url: {
          add: "/sjxmzygl/sjWorkProjectPower/addPower",
          userList: '/sjxmzygl/sjWorkUsers/queryMemberUserListInfo',
          '底稿': '/sjxmzygl/sjWorkZtfaEveDigao/queryProjectDraftList',
          '问题': '/sjxmzygl/sjWorkZtfaProblem/queryProblemList',
          '取证': '/sjxmzygl/sjWorkZtfaMatter/queryProjectMatterList',

        },
        rules: {}
      }
    },
    created() {
    },
    watch: {},
    methods: {
      selectChange() {
        this.model.number = ''
        let url = this.url[this.model.type];
        this.numberList = [];
        getAction(url, { proId: this.id, pageNo: 1, pageSize: 999 }).then((res) => {
          if (res.success) {
            this.numberList = res.result.records
          } else {
          }
        })
      },
      add() {
        this.model = {number: '', proId: this.id, uid: []}
        this.getUserList()
        this.visible = true
      },
      check(record) {
        this.model = Object.assign({}, record)
        if (this.model.uid) {
          this.model.uid = this.model.uid.split(',');
        }
        this.getUserList()
        this.visible = true
      },
      edit(record) {
        this.model = Object.assign({}, record)
        if (this.model.uid) {
          this.model.uid = this.model.uid.split(',');
        }
        this.getUserList()
        this.visible = true
      },
      getUserList() {
        getAction(this.url.userList, {proId: this.id}).then((res) => {
          if (res.success) {
            this.userListData = res.result.records
          } else {
            console.log(res)
          }
        })
      },
      close(isSubmit) {
        if (isSubmit) {
          this.saveData()
        } else {
          this.visible = false
        }
      },
      saveData() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.model.uid = this.model.uid.toString()
            httpAction(this.url.add, this.model, 'post').then((res) => {
              if (res.success) {
                this.$message.success(res.message)
                this.$emit('ok')
                this.visible = false
              } else {
                this.$message.error(res.message);
              }
            })
          }
        })
      }
    },
  }
</script>

<style lang="less" scoped>
  @import '../../../css/checkForm.less';

  .name-type {
    width: 110px;
    margin-left: 5px;
    border: 1px solid #e0e0e0;

    /deep/ .ant-select-selection {
      box-sizing: border-box;
      min-height: 27px !important;

      .ant-select-selection__rendered {
        line-height: 27px !important;
      }
    }
  }
</style>
